<template> 
    <div class="container">
        
        <div class="login_head" >
            <span class="iconfont icon-arrow-right"></span>
            会员登录
        </div>
        <!-- <div class="verify"> -->
        <van-tabs v-model="active">
            <van-tab>
                <div slot="title">
                    <span class="iconfont icon-renzheng"></span>验证码登录
                </div>
                <div class="phone">
                    <b>手机号</b> 
                    <input type="text" placeholder="请输入手机号" v-model="phone">
                </div>  
                <div class="password">
                    <b>动态码</b>
                    <input type="text" placeholder="请输入手机短信动态" v-model="password">
                    <i class="dtm" v-show="yzm">获取动态码</i>
                </div> 
            </van-tab>
            <van-tab>
                <div slot="title">
                    <span class="iconfont icon-suo"></span>密码登录
                </div>
                <div class="phone">
                    <b>手机号</b>
                    <input type="text" placeholder="请输入手机号" v-model="phone2">
                </div>  
                <div class="password">
                    <b>密码</b>
                    <input type="password" placeholder="请输入登录密码" v-model="password2">
                </div> 
            </van-tab>
        </van-tabs>
        <div class="tcp">
            <span class="iconfont icon-duihao" :class="{dins:xy}" @click="fn1" ></span>
            同意
            <i>用户注册协议</i>
        </div> 
        <button :class="{bt:tj}" class="submit">登录</button>
        <span class="explain">手机登录注册统一入口，第一次登录默认注册，<br />登录后到我的商城中设置密码</span>
    </div>
</template> 

<script>     
export default {
    data(){
        return{
            xy:true,
            phone:"",
            password:"",
            phone2:"",
            password2:"",
            active:0

        }
    },
    methods:{
        fn1(){
           this.xy=!this.xy
           console.log(this.phone.length)
           console.log(this.phone.length>=6 ? 1 : 0 )
           console.log(this.yzm)

        }
    },
    computed:{
        yzm:function(){
            return this.phone.length>=6 ? 1 : 0 
            
        },
        tj:function(){
            if(this.active===0){
                return this.phone.length>=6 && this.password.length>=4 &&this.xy ? 1 : 0 
            }else{
                 return this.phone2.length>=6 && this.password2.length>=6 &&this.xy ? 1 : 0 
            }
            
        }
    }
    
    
}
</script>

<style lang="scss">
    .container{
        background: #e9ecec;
    
       .van-tab span{
            display: inline;
        }
        .login_head{
            padding-top: 0.5rem;
            text-align: center;
            position: relative;
            line-height: 0.96rem;
            color: #333;
            font-size: 0.32rem;
            margin-bottom: 0.02rem;
            span{
                position: absolute;
                left: 0.28rem;
                font-size: 0.38rem;
                color: #666666;
            }
        }
        .van-tabs{
            .van-tabs__wrap{
                height: 1rem;
                margin-bottom: 0.24rem;
                border-bottom: 0.02rem solid #e8e8e8;

                .van-tab{
                    font-size: 0.3rem; 
                    line-height: 1rem;
                    color: #5e5656;
                    span{
                        font-size: 0.34rem;
                    }
                   
                }
                .van-tab:nth-child(2):after{
                    content: '';
                    height: 0.52rem;
                    width: 0.02rem;
                    background: #eaeaea;
                    flex-shrink: 0;
                    display: block;
                    position: relative;
                    top: -0.75rem;
                }
                .van-tab--active {
                    color: #d81e06;
                }
                .van-tabs__line{
                        height: 0.06rem!important;
                        width: 2rem!important;
                    }

            }
            .van-tabs__content{
                background: #fff;
                margin-bottom: 0.04rem;
                 .van-tab__pane{
                     font-size: 0.3rem;
                     line-height: 0.92rem;
                     input{
                         border: none;
                         margin:0 0.2rem 0 0.2rem;
                         width: 3.2rem;
                         caret-color: #d81b60;
                         &::-webkit-input-placeholder{
                             color: #c5cdd9;
                         }
                     }
                    .phone ,.password{
                       
                        display: flex;
                        b{
                            font-weight: normal;
                            width: 1.78rem;
                            text-align: right;
                        }
                        .dtm{
                            font-style: normal;
                            font-size: 0.28rem;
                            color: #54b2e5;
                            text-decoration: underline;
                        }
                    }
                    .phone{
                         border-bottom: 0.02rem solid #e8e8e8;
                    }

                }
            }
           
           
        }
        .tcp{
            display: flex;
            font-size: 0.28rem;
            color: #000;
            height: 1.12rem;
            align-items: center;
            i{
                font-style: normal;
                color: #33a5e4;
                margin-left: 0.16rem;
            }
            span{
                box-sizing: border-box;
                display: inline-block;
                height: 0.36rem;
                width: 0.36rem;
                border-radius: 0.04rem;
                font-size: 0.3rem;
                text-align: center;
                line-height:0.36rem;
                margin:0 0.16rem 0 0.62rem;
                border: 0.04rem solid #6b6c6c;
                color: #e9ecec;
                
            }
        }
        button{
            width: 6.24rem;
            height: 0.92rem;
            background: #818181;
            border-radius: 0.1rem;
            margin: 0.24rem auto 0.36rem;
            font-size: 0.36rem;
            color: #fff;
        }
        .explain{
            padding-left: 0.56rem;
            font-size: 0.26rem;
            color: #6b6c6c;
        }
        
    }
    .dins{
        background: #d81b60!important;
        color: #fff!important;
        border: none!important;
    }
    .bt{
        background: #d81e06!important;
    }
    
   
</style>
